<!--  -->
<template>
  <div class="maxbg">
    <transition name="fade">
      <div class="pageBody g-bg">
        <div class="dt-top">
          <div class="logo"></div>
          <div class="down-btn" @click="linkCourse">下载APP</div>
        </div>
        <div class="pay-main">
          <div class="pay-card">
            <div class="cd-infor">
              <div class="cd-img">
                <img src="~@/assets/images/q-card.png" />
              </div>
              <div class="cd-tl">{{ questionData.name }}</div>
              <!-- <div class="cd-money">{{ questionData.price / 1000 }}芝士</div> -->
              <template v-if="questionData.accessMode == 1">
                <div class="cd-money">免费</div>
              </template>
              <template v-else-if="questionData.accessMode == 2">
                <div class="cd-money">{{ questionData.price / 1000 }}芝士</div>
              </template>
              <template v-else>
                <div class="cd-money">VIP限免</div>
              </template>
              <div class="cd-time" v-if="questionData.expiryDateText">
                有效期：{{ questionData.expiryDateText }}
              </div>
            </div>
          </div>
          <div class="q-chapter">
            <div class="q-tl">
              <div class="q-name">章节目录</div>
              <div class="q-all">共568题</div>
            </div>
            <div class="q-box">
              <template v-for="item in chanterList">
                <div class="q-gp">
                  <div class="q-chapter-tl">{{ item.name }}</div>
                  <div class="q-num">{{ item.questionCount }}道</div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="vip-box" v-if="!isUserInfoComplete && loginState">
          <div class="vip-inf-img"></div>
          <div class="vip-tl">赠送7天会员，享88折优惠！</div>
          <div class="vip-btn" @click="gotoInforPage">立即完善</div>
        </div>
        <div
          class="vip-box"
          v-if="questionData.accessAuth !== 1 && loginState && isUserInfoComplete"
        >
          <div class="vip-img"></div>
          <div class="vip-tl" v-if="isVip">会员到期时间{{ time }}</div>
          <div class="vip-tl" v-else>VIP会员享受85折优惠！</div>
          <div class="vip-btn" v-if="isVip" @click="gotoPay">会员续费</div>
          <div class="vip-btn" v-else-if="!isVip && courseData.specialOffer==2" @click="payCrouse(courseData.specificationId)">立即购买</div>
          <div class="vip-btn" v-else @click="gotoPay">开通会员</div>
        </div>
        <div class="dt-foot" v-if="!loginState">
          <div class="ft-tip">
            <div class="tip-tx">请先下载APP再打开课程，体验会更好</div>
          </div>
          <div class="ft-btn" @click="payCrouse(questionData.specificationId)">
            立即购买
          </div>
        </div>
        <div class="dt-foot-service order-bt-gp" v-else>
          <div class="service" id="service">客服</div>
          <template v-if="questionData.accessAuth !== 1">
            <div class="login-btn" v-if="!isVip && questionData.accessMode === 4 && questionData.specialOffer != 2">
              开通会员
            </div>
            <div
              class="login-btn"
              v-else-if="questionData.accessMode === 2"
              @click="payCrouse(questionData.specificationId)"
            >
              <span v-if="questionData.specialOffer==1"
                >折扣价{{ questionData?.discountPrice / 1000 }}芝士&nbsp;</span
              >立即购买
            </div>
          </template>
          <template v-else>
            <div class="login-btn" @click="isApp = true">参与学习</div>
          </template>
        </div>
      </div>
    </transition>
  </div>
  <div class="mask" v-if="isApp">
    <div class="modal">
      <div class="moadl-tl">提示</div>
      <div class="modal-tx">请前往APP学习</div>
      <div class="modal-btn" @click="linkCourse">知道了</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfor: {},
      libraryId: 0,
      questionData: {},
      chanterList: [],
      isVip: false,
      loginState: false,
      time: "",
      isApp: false,
      isUserInfoComplete: false,
    };
  },
  components: {},
  created() {
    this.isVip = JSON.parse(localStorage.getItem("isVip"));
    this.time = localStorage.getItem("vipTime")?.replaceAll("/", "-");
    this.init();
  },
  mounted() {
    this.libraryId = this.$route.query.id;
    // 查询单个题库详情
    this.getQuestionBankSingleDetail();
    this.getQuestionChapterList();
    this.btnType();
    this.getUserCompleteInfo();
    // this.getUserInfor();
  },
  methods: {
    getUserCompleteInfo() {
      this.$http
        .getUserCompleteInfo()
        .then(async (res) => {
          if (res.flag === 0) {
            this.isUserInfoComplete = res.data == 0 ? false : true;
          }
        })
        .catch((err) => {
          // this.$Message.error(err.response.data.message);
        });
    },
    gotoInforPage() {
      const actionType = this.$route.query.actionType;
      const code = this.$route.query.invitationCode
        ? this.$route.query.invitationCode
        : "";
      const type = this.$route.query.type ? this.$route.query.type : "";
      const info = {
        actionType: actionType,
        invitationCode: code,
        type: type,
        idx: 3,
      };
      localStorage.setItem("userInfo", JSON.stringify(info));
      this.$router.push({
        path: "/myinformation",
        query: {
          actionType: actionType,
          invitationCode: code,
          type: type,
        },
      });
    },
    gotoPay() {
      const actionType = this.$route.query.actionType;
      const code = this.$route.query.invitationCode
        ? this.$route.query.invitationCode
        : "";
      const type = this.$route.query.type ? this.$route.query.type : "";
      this.$router.push({
        path: "/vip",
        query: {
          actionType: 4,
          invitationCode: code,
          type: type,
        },
      });
    },
    btnType() {
      const token = localStorage.getItem("access_token");
      if (token && token != null && token != "null") {
        this.loginState = true;
      }
    },
    payCrouse(specificationId) {
      if(!this.loginState){
        this.$router.push({
          path: "/login",
        });
      }else{
        const courseId = this.$route.query.id;
        const code = this.$route.query.invitationCode
          ? this.$route.query.invitationCode
          : "";
        const actionType = this.$route.query.actionType;
        const type = this.$route.query.type ? this.$route.query.type : "";
        this.$router.push({
          path: "/question/pay",
          query: {
            courseId: courseId,
            specificationId: specificationId,
            showType: 1,
            invitationCode: code,
            actionType: actionType,
            type: type,
          },
        });
      }
    },
    getUserInfor() {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.userInfo = userInfo || {};
      this.$http
        .getUserHalo()
        .then((res) => {
          if (res.flag == 0) {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].code == 1) {
                const newTime = new Date().getTime();
                if (newTime <= res.data[i].expiration) {
                  this.isVip = true;
                }
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询章节列表
    getQuestionChapterList() {
      this.$http.getQuestionChapterList(this.libraryId).then((res) => {
        if (res.flag === 0) {
          const data = res.data || [];
          this.chanterList = data;
        } else {
          ElMessage.warning(res.message);
        }
      });
    },
    // 查询单个题库详情
    getQuestionBankSingleDetail() {
      this.$http.getQuestionBankSingleDetailV2(this.libraryId).then((res) => {
        if (res.flag === 0) {
          // console.log(res)
          const data = res.data || {};
          //   if (!data.learn) {
          //     this.subscribeQuestion();
          //   }
          this.questionData = data;
        }
      });
    },
    init() {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = "//web.cdn.openinstall.io/openinstall.js";
      s.addEventListener(
        "load",
        () => {
          var data = OpenInstall.parseUrlParams();
          new OpenInstall(
            {
              appKey: "zpyiil", //appkey参数配置,需要自行替换对应的appkey
              onready: function () {
                var m = this;
                /*在app已安装的情况尝试拉起app*/
                m.schemeWakeup({
                  data: data,
                  channelCode: "test-channelcode",
                });
                window.wakeupOrInstall = function () {
                  this.rnum = this.rnum + 1;
                  m.wakeupOrInstall({
                    data: data,
                    channelCode: "test-channelcode",
                  });
                };
              },
            },
            data
          );
        },
        false
      );
      document.head.appendChild(s);
    },
    linkCourse() {
      // alert('下载课程')
      // console.log(1212)
      window.wakeupOrInstall(); //此方法为scheme、Universal Link唤醒以及引导下载的作用（必须调用且不可额外自行跳转下载）
      return false;
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
